<template>
  <div class="container">
    <div class="top-name">
      <div class="label">请输入机构名称</div>
      <input type="text" v-model="data.title">
    </div>
    <div class="bg-box">
      <!--<img :src="data.hburl.content" alt="" v-if="data.hburl && data.hburl.content" width="100%">-->
      <!--<img :src="data.hburl" alt="" v-else width="100%">-->
      <img :src="image.content" v-if="image.content" alt="" width="100%">
      <van-uploader
        class="poster-upload"
        :after-read="afterRead"
        multiple
        :max-count="1">
        <div class="upload-bg">
          <van-icon name="plus" size="30px"/>
          <span>点击上传图片</span>
        </div>
      </van-uploader>
    </div>
    <div class="ad">
      <div class="ad-title">海报广告语（点击内容可编辑）</div>
      <van-swipe>
        <van-swipe-item>
          <div class="input-box sae-textarea">
            <p v-if="showAd1" @click="toShowADEdit(1)" style="min-height: 100px;">{{ contentList.content1 }}</p>
            <van-field v-else v-model="contentList.content1" autosize type="textarea" ref="ad1" @blur="showAd1 = true"/>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="input-box sae-textarea">
            <p v-if="showAd2" @click="toShowADEdit(2)" style="min-height: 100px;">{{ contentList.content2 }}</p>
            <van-field v-else v-model="contentList.content2" autosize type="textarea" ref="ad2" @blur="showAd2 = true"/>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="input-box sae-textarea">
            <p v-if="showAd3" @click="toShowADEdit(3)" style="min-height: 100px;">{{ contentList.content3 }}</p>
            <van-field v-else v-model="contentList.content3" autosize type="textarea" ref="ad3" @blur="showAd3 = true"/>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="btns">
      <van-button plain hairline type="info" @click="$router.go(-1)">返回</van-button>
      <van-button type="info" @click="poster()">保存</van-button>
    </div>
    <div class="share">
      <div class="share-item">
        <img src="../../../../assets/img/icon-wx.png" alt="">
        <span>分享好友</span>
      </div>
      <div class="share-item">
        <img src="../../../../assets/img/icon-friend.png" alt="">
        <span>分享朋友圈</span>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'edit-poster',
  data () {
    return {
      data: {},
      // name: '壹起学钢琴培训机构',
      // bg: require('@/assets/img/share-logo.png'),
      showAd1: true,
      showAd2: true,
      showAd3: true,
      // ad: '别人都已经在跑道上飞驰了，你还在起跑线上观望吗？赶紧拨打18300009999私我报名学习钢琴吧！'
      contentList: {
        content1: '',
        content2: '',
        content3: ''
      },
      image: {}
    }
  },
  created () {
    this.lookPoster()
  },
  methods: {
    // 查看海报 lookPoster
    lookPoster () {
      api.agencyLookPoster({
        params: {
          mechanism_id: JSON.parse(sessionStorage.getItem('user')).id
        },
        callback: res => {
          if (res.data.data) {
            this.data = res.data.data
            this.contentList.content1 = res.data.data.content
            this.contentList.content2 = res.data.data.content2
            this.contentList.content3 = res.data.data.content3
          }
        }
      })
    },
    // 编辑海报
    poster () {
      let params = new FormData()
      params.append('mechanism_id', JSON.parse(sessionStorage.getItem('user')).id)
      params.append('title', this.data.title)
      params.append('content', this.data.content)
      params.append('content', this.contentList.content1)
      params.append('content2', this.contentList.content2)
      params.append('content3', this.contentList.content3)
      if (this.data.hburl.file) {
        params.append('image', this.data.hburl.file)
      }
      api.agencyPoster({
        params,
        callback: res => {
          this.lookPoster()
        }
      })
    },
    // 获取上传的图片
    afterRead (file) {
      this.data.hburl = file
      this.image = file
      console.log(this.data.hburl)
    },
    toShowADEdit (index) {
      let key = 'showAd' + index
      this[key] = false
      this.$nextTick(() => {
        this.$refs['ad' + index].focus()
      })
    }
  }
}
</script>

<style scoped>
  .van-uploader{
    width: 100%;
  }
  .top-name .label{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:400;
    line-height:17px;
    color:rgba(143,143,143,1);
  }
  .top-name input{
    width: 100%;
    border: none;
    border-bottom: 1px solid #999;
    height: 36px;
  }
  .upload-bg{
    width: 100%;
    height: 162px;
    border: 1px dashed #999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(0,0,0,.3);
    color: #fff;
  }
  .container{
    padding: 15px;
  }
  .bg-box{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin: 20px 0;
  }
  .bg-box img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .input-box .van-cell{
    padding: 0;
  }
  .ad-title{
    font-size:18px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:40px;
  }
  .input-box p, .input-box .van-cell{
    font-size: 16px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:25px;
    color:rgba(30,30,30,1);
  }
  .share{
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
  }
  .share .share-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .share .share-item span{
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 28px;
    color: rgba(153,153,153,1);
  }
  .btns{
    margin-top: 40px;
  }
</style>
